import React, { useEffect, useState } from "react"
import { Collapse } from 'antd'
import ChatAPI from "../data/ChatAPI"
const { Panel } = Collapse

class BuildingYourOwnHooks extends React.Component {
    render() {
        return <FriendItem name={"Alice"} />
    }
}

function FriendItem(props) {
    const online = useFriendStatus(props.name)
    console.log(typeof online,online)
    return <Collapse>
        <Panel header={props.name}>
            <div style={{ backgroundColor: online ? 'green' : 'gray' }}>
                {online ? 'online' : 'offline'}
            </div>
        </Panel>
    </Collapse >
}

function useFriendStatus(name) {
    const [online, setOnline] = useState(null)
    useEffect(() => {
        function handleOnlineStatus(isOnline) {
            setOnline(isOnline)
        }
        ChatAPI.subscribeToFriendStatus(name, handleOnlineStatus)
        return () => ChatAPI.unsubscribeToFriendStatus(name, handleOnlineStatus)
    })
    return online
}


export default BuildingYourOwnHooks